<template>
  <div id="choice">
    <div class="choicearea">
      <div class="choicebox">
        <div class="boxwithinnoe boxwithin">
          <div class="introducearea">
            <p class="iconfont icon-jianli"></p>
            <div class="introduce">
              <p class="inttext">
                Maybe you are interested in the letter left by Jin Jiang's
                farewell to the sage
              </p>
              <p @click="navru" class="Clijump">Clijump</p>
            </div>
          </div>
        </div>
      </div>
      <div class="choicebox">
        <div class="boxwithintow boxwithin">
          <div class="introducearea">
            <p class="iconfont icon-wenjianjia"></p>
            <div class="introduce">
              <p class="inttext">Website code and share to gitee</p>
              <p @click="waib" class="Clijump">Clijump</p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  methods: {
    navru() {
      if (this.$route.path != "/envelope") {
        setTimeout(() => {
          this.$router.push("/envelope");
        }, 1200);
      }
    },
    waib() {
      setTimeout(() => {
        window.location.href = "https://gitee.com/jiang-cisheng/jiang-cisheng";
      }, 1200);
    },
  },
};
</script>

<style lang="less" scope>
@gubor:2px solid;
@gudow:0 0 20px;
@lan: #5779b6;
@yin: #a54a76;
.flex {
  display: flex;
  justify-content: center;
  align-items: center;
}
#choice {
  width: 100%;
  height: 100%;
  @media screen and (max-width: 680px){
        height:  50%;
    }
  .choicearea {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-around;
    
    @media screen and (max-width: 680px){
      display: flex;
      align-items: center;
      flex-direction: column;
    }
    
    .choicebox {
      width: 6rem;
      height: 6rem;
      border-radius: 50%;
      margin-top: 30px;
      .flex();
      &:nth-child(1) {
        animation-name: choicenoe;
      animation-duration: 4s;
      animation-iteration-count: infinite;
        border: @gubor @lan;
        box-shadow: @gudow @lan;
      }
      &:nth-child(2) {
        animation-name: choicetow;
      animation-duration: 4s;
      animation-iteration-count: infinite;
        border: @gubor @yin;
        box-shadow: @gudow @yin;
      }
      .boxwithin {
        width: 80%;
        height: 80%;
        border-radius: 50%;
        .flex();
        .introducearea {
          display: flex;
          .iconfont {
            font-size: 1.5rem;
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
          }
          .introduce {
            width: 0rem;
            height: 1.5rem;
            background-color: #111;
            transition: 1s;
            overflow: auto;
            font-size: 0.1rem;
            color: #fdfdfd;
            border-radius: 0.1rem;
            display: flex;
            justify-content: space-between;
            flex-direction: column;
            text-align: center;

            &::-webkit-scrollbar {
              width: 0.1rem;
              height: 100%;
            }
            &::-webkit-scrollbar-thumb {
              border-radius: 10px;
              box-shadow: 0px 10px 30px #fff;
            }
            .inttext {
              height: 1.2rem;
              overflow: hidden;
            }
          }
          &:hover .introduce {
            width: 2.5rem;
            padding: 00.1rem;
          }
          .Clijump {
            width: 90%;
            border: 1px solid #fff;
            border-image: linear-gradient(80deg, @lan, @yin) 1;
            text-align: center;
          }
        }
      }
      .boxwithinnoe {
        border: @gubor @yin;
        box-shadow: @gudow @yin;
        .introducearea {
          &:hover .introduce {
            box-shadow: 6px 0px 7px #fff;
          }
        }
        .iconfont {
          transition: 0.5s;
          background-image: -webkit-linear-gradient(left, @lan, @yin);
        }
      }
      .boxwithintow {
        border: @gubor @lan;
        box-shadow: @gudow @lan;

        .introducearea {
          flex-direction: row-reverse;
          &:hover .introduce {
            box-shadow: -6px 0px 7px #fff;
          }
          .iconfont {
            background-image: -webkit-linear-gradient(left, @yin, @lan);
          }
        }
      }
    }
  }
}

@keyframes choicenoe {
  0%{
    box-shadow: 0 0 10px @lan;
  } 
  50%{
    box-shadow: 0 0 30px @lan;
  }
  100%{
    box-shadow: 0 0 10px @lan;
  }
}
@keyframes choicetow {
  0%{
    box-shadow: 0 0 10px @yin;
  } 
  50%{
    box-shadow: 0 0 30px @yin;
  }
  100%{
    box-shadow: 0 0 10px @yin;
  }
}
</style>